import { useState } from "react";
import {
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Image,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
} from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { Colors } from "@/constants/Colors";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";

export default function LoginScreen() {
  const [phone, setPhone] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

  const handleLogin = () => {
    // 处理登录逻辑
    console.log("登录", phone, password);
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
        keyboardShouldPersistTaps="handled"
      >
        {/* 返回按钮 */}
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => router.back()}
        >
          <Ionicons name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>

        {/* Logo区域 */}
        <View style={styles.logoContainer}>
          <Image
            source={{
              uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
            }}
            style={styles.logo}
            resizeMode="contain"
          />
          <ThemedText style={styles.welcomeText}>欢迎登录</ThemedText>
        </View>

        {/* 输入表单 */}
        <View style={styles.formContainer}>
          <View style={styles.inputContainer}>
            <Ionicons name="phone-portrait" size={20} color="#666" />
            <TextInput
              style={styles.input}
              placeholder="请输入手机号"
              placeholderTextColor="#999"
              value={phone}
              onChangeText={setPhone}
              keyboardType="phone-pad"
            />
          </View>

          <View style={styles.inputContainer}>
            <Ionicons name="lock-closed" size={20} color="#666" />
            <TextInput
              style={styles.input}
              placeholder="请输入密码"
              placeholderTextColor="#999"
              value={password}
              onChangeText={setPassword}
              secureTextEntry={!showPassword}
            />
            <TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
              <Ionicons
                name={showPassword ? "eye" : "eye-off"}
                size={20}
                color="#666"
              />
            </TouchableOpacity>
          </View>

          {/* 登录按钮 */}
          <TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
            <ThemedText style={styles.loginButtonText}>登录</ThemedText>
          </TouchableOpacity>

          {/* 其他选项 */}
          <View style={styles.optionsContainer}>
            <TouchableOpacity>
              <ThemedText style={styles.optionText}>忘记密码？</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity>
              <ThemedText style={styles.optionText}>新用户注册</ThemedText>
            </TouchableOpacity>
          </View>

          {/* 第三方登录 */}
          <View style={styles.thirdPartyContainer}>
            <ThemedText style={styles.thirdPartyTitle}>其他登录方式</ThemedText>
            <View style={styles.thirdPartyButtons}>
              <TouchableOpacity style={styles.thirdPartyButton}>
                <Ionicons name="logo-wechat" size={28} color="#07C160" />
              </TouchableOpacity>
              <TouchableOpacity style={styles.thirdPartyButton}>
                <Ionicons name="logo-apple" size={28} color="#000" />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  scrollContainer: {
    flexGrow: 1,
    paddingHorizontal: 20,
  },
  backButton: {
    position: "absolute",
    top: 50,
    left: 20,
    zIndex: 1,
  },
  logoContainer: {
    alignItems: "center",
    marginTop: 100,
    marginBottom: 50,
  },
  logo: {
    width: 120,
    height: 120,
    marginBottom: 20,
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#333",
  },
  formContainer: {
    width: "100%",
  },
  inputContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#E5E5E5",
    paddingVertical: 10,
  },
  input: {
    flex: 1,
    marginLeft: 10,
    fontSize: 16,
    color: "#333",
  },
  loginButton: {
    backgroundColor: Colors.primary,
    borderRadius: 25,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
  },
  loginButtonText: {
    color: "#fff",
    fontSize: 18,
    fontWeight: "bold",
  },
  optionsContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 20,
  },
  optionText: {
    color: Colors.primary,
    fontSize: 14,
  },
  thirdPartyContainer: {
    marginTop: 50,
    alignItems: "center",
  },
  thirdPartyTitle: {
    color: "#999",
    fontSize: 14,
    marginBottom: 20,
  },
  thirdPartyButtons: {
    flexDirection: "row",
    justifyContent: "center",
    gap: 30,
  },
  thirdPartyButton: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
  },
});
